<template>
  <div>
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【题型】 : {{ questionType(row.questionType) }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          【编号】:{{ row.id }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【难度】:{{ difficulty(row.difficulty) }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          【标签】:
          {{ row.tags }}
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】 : {{ row.subjectName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          【目录】: {{ row.directoryName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】: {{ row.direction }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
    <hr />
    <div>
      <p>【提干】:</p>
      <el-link style="margin-bottom: 10px" v-if="!isShortAnswer" type="primary"
        >{{ html2Text(row.question) }}
      </el-link>
      <div v-if="!isShortAnswer">
        {{ questionType(row.questionType) + '题' }}
        <span v-if="!isShortAnswer">选项：（以下选中的选项为正确答案）</span>
        <!-- <div>
          <el-form ref="form">
            <el-form-item>
              <el-radio-group v-if="isSingle" v-model="row.options">
                <el-radio
                  style="display: block; margin: 10px 5px"
                  v-for="(item, id) in row.options"
                  :key="id"
                  :label="item.id"
                  >{{ item.title }}</el-radio
                >
              </el-radio-group>
              <el-checkbox-group v-if="ischeckkBox" v-model="row.options">
                <el-checkbox
                  style="display: block; margin: 10px 5px"
                  v-for="(item, id) in row.options"
                  :key="id"
                  name="type"
                  >{{ item.title }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div> -->
        <div v-for="item in row.options" :key="item.id">
          <input
            style="margin: 10px"
            v-if="isSingle"
            v-model="single"
            type="radio"
            :value="item.isRight"
          />
          <input
            style="margin: 10px"
            type="checkbox"
            v-if="ischeckkBox"
            v-model="multi"
            :value="item.isRight"
            name=""
            id=""
          />{{ item.title }}
          <div v-if="isShortAnswer">{{ html2Text(row.question) }}</div>
        </div>
      </div>
      <el-link v-else type="primary">{{ html2Text(row.question) }}</el-link>
    </div>
    <hr />
    <p>
      【参考答案】:
      <el-button type="danger" @click="showVideo = true"
        >视频答案预览</el-button
      >
    </p>
    <video
      v-if="showVideo"
      :src="row.videoURL"
      controls
      autoplay
      loop
      width="300px"
      height="300px"
    ></video>
    <hr />
    <p>【答案解析】 : {{ row.remarks }}</p>
    <hr />
    <p>【题目备注】: {{ row.answerID }}</p>
    <div style="text-align: center">
      <el-button @click="cancel" type="danger">关闭</el-button>
    </div>
  </div>
</template>
<script>
// import { questionType } from '@/api/hmmm/constants.js'
import { html2Text } from '@/utils'

export default {
  name: '',
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      quesData: {},
      showVideo: false,
      ischeckkBox: false,
      isShortAnswer: false,
      isSingle: false,
      single: '1',
      multi: ['1']
    }
  },
  created () {},
  watch: {
    'row.questionType': {
      handler (newVal) {
        // console.log(newVal)
        if (newVal === '1') {
          this.ischeckkBox = false
          this.isShortAnswer = false
          this.isSingle = true
        } else if (newVal === '2') {
          this.ischeckkBox = true
          this.isShortAnswer = false
          this.isSingle = false
        } else {
          this.ischeckkBox = false
          this.isShortAnswer = true
          this.isSingle = false
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 格式化提型
    questionType (data) {
      if (data === '1') {
        return '单选'
      } else if (data === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    // 格式化难度
    difficulty (data) {
      if (data === '1') {
        return '简单'
      } else if (data === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    html2Text,
    cancel () {
      // 关闭弹框
      this.$parent.$parent.showDialog = false
      // console.log(this.$parent.$parent.$options.name)
      // if (this.$parent.$parent.$options.name === 'questions') {
      //   this.$parent.$parent.showDialog = false
      // } else if (this.$parent.$parent.$options.name === 'questions-choice') {
      //   this.$parent.$parent.loadChoiceList()
      // }
    }
  }
}
</script>
<style>
.grid-content {
  font-size: 18px;
}
.el-row {
  margin: 15px 0;
}
</style>
